﻿
@{
    ViewBag.Title = "ZLCX";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    #divCXTJ ul { display: inline-block; }
        #divCXTJ ul li { display: inline-block; padding: 5px 10px; cursor: pointer; }
            #divCXTJ ul li:hover, #divCXTJ ul li.actived { background-color: #ed6302; color: white; }

    /*普通table时，文件名的显示样式*/
    .filenamefmt .file-icon { display: inline-block; }
    .filenamefmt a { width: 170px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tblFile .tblFile_FILENAME { text-align: left; }

    .switchmode { display: inline-block; margin-right: 20px; font-size: 20px; }
        .switchmode span.actived, .switchmode span:hover { color: #126FD8; }
    .iconview { }
        .iconview li { position: relative; display: inline; float: left; overflow: hidden; width: 110px; height: 110px; border: thin solid #ddd; border-radius: 8px; text-align: center; margin: 0 8px 20px 0; font-size: 12px; }
            .iconview li:hover { background-color: #e5f3ff; }
        .iconview .l-icon { position: absolute; top: 2px; padding: 10px; width: 100%; height: 90px; }
            .iconview .l-icon .file-icon { margin: 0 auto; }
        .iconview .l-title { position: absolute; top: 80px; left: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
        .iconview .l-filesize { display: none; }
        .iconview .l-scsj { display: none; }
        /*在图标模式时，表头不可见*/
        .iconview .listviewhead { display: none; }

    .listview { }
        .listview li { display: block; overflow: hidden; border-bottom: thin solid #ddd; height: 51px; text-align: left; font-size: 16px; }
            .listview li:hover { background-color: #e5f3ff; }
        .listview .l-icon { display: inline-block; padding: 10px; line-height: 51px; height: 51px; }
            /*强制让列表模式下的图标变为小图标*/
            .listview .l-icon .file-icon-lg { width: 18px; height: 24px; border-radius: 2px; }
                .listview .l-icon .file-icon-lg::before { border-bottom-left-radius: 2px; border-width: 4px; }
                .listview .l-icon .file-icon-lg::after { font-size: 7px; padding: 2px; }
        .listview .l-title { display: inline-block; width: 50%; line-height: 51px; height: 51px; overflow: hidden; text-align: left; }
        .listview .l-filesize { display: inline-block; width: 15%; line-height: 51px; height: 51px; text-align: center; overflow: hidden; }
        .listview .l-scsj { display: inline-block; width: 15%; line-height: 51px; height: 51px; text-align: center; overflow: hidden; }
        /*表头样式*/
        .listview .listviewhead { background-color: #ccc !important; }
            .listview .listviewhead .l-title { text-align: center; }
            .listview .listviewhead > * { border-right: 1px solid #999; }
            .listview .listviewhead .l-icon { visibility: hidden; }

    .praise { background-image: url('/images/steps_praised.png');   
                display: inline-block;
                width: 23px;
                height: 28px;
                background-position: left;
                background-repeat: no-repeat;
                background-size: 483px 28px;
                }
    @@-webkit-keyframes stepsV1 {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

@@-moz-keyframes stepsV1 {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

@@-o-keyframes stepsV1 {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

@@keyframes stepsV1 {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}
     .praise:hover{ 
    -webkit-animation-timing-function: steps(20);
    animation-timing-function: steps(20);
    -webkit-animation-name: stepsV1;
    animation-name: stepsV1;
    -webkit-animation-duration: .65s;
    animation-duration: .65s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
     }
     .praise.actived{background-position: right;}

         .pub-icon { background-image: url('/images/public-icon-2.png');   
                display: inline-block;
                width: 15px;
                height: 15px;
                background-repeat: no-repeat;
                }
         .pub-icon.download{
             background-position:0 0;
         }
         .pub-icon.download:hover{
             background-color:#333;
             background-position:0 -35px;
         }
         .pub-icon.fav{
             background-position:0 -71px;
         }
         .pub-icon.fav:hover{
             background-position:0 -150px;
         }
         .pub-icon.fav.actived{
             background-position:0 -110px;
         }
         .pub-icon.trash{
             background-position:0 -292px;
         }
         .pub-icon.trash:hover{
             background-position:0 -340px;
         }
         .pub-icon.eye{
             background-position:0 -450px;
         }
         .pub-icon.eye:hover{
             background-position:0 -236px;
         }
</style>
 <span class="praise">&nbsp;</span>
<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="pub-icon download"> </span>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="pub-icon fav"> </span>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="pub-icon trash"> </span>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="pub-icon eye"> </span>
<div class="panel panel-default">
    <div class="panel-heading">
        <div id="divCXTJ">
            <div>
                <label>所属类别:</label>
                <ul id="ulSSLB">
                    <li class="actived">全部</li>
                    <li>会议资料</li>
                    <li>发展计划部评估会资料</li>
                    <li>油田部审查会议资料</li>
                    <li>横向项目资料</li>
                    <li>文献资料</li>
                    <li>其他</li>
                </ul>
            </div>
            <div>
                <label>所属专业:</label>
                <ul id="ulSSZY">
                    <li class="actived">全部</li>
                    <li>油气储运</li>
                    <li>油气加工</li>
                    <li>天然气</li>
                    <li>给排水</li>
                    <li>供配电自控</li>
                    <li>经济</li>
                    <li>其他</li>
                </ul>
            </div>
            <div>
                <label>所属油田:</label>
                <ul id="ulSSYT">
                    <li class="actived">全部</li>
                    <li>中石化</li>
                    <li>胜利</li>
                    <li>中原</li>
                    <li>河南</li>
                    <li>江苏</li>
                    <li>江汉</li>
                    <li>华东</li>
                    <li>华北</li>
                    <li>西南</li>
                    <li>西北</li>
                    <li>东北</li>
                    <li>上海</li>
                </ul>
            </div>
            <div>
                <label>文件类型:</label>
                <ul id="ulExt">
                    <li class="actived">全部</li>
                    <li value="PPT">PPT</li>
                    <li value="DOC">DOC</li>
                </ul>
            </div>
        </div>
        <div>
            <label>关键字:</label>
            <input id="txtKEY" type="text" value="" />
            <button id="btnQuery" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-search"></span>文件查询
            </button>
            <span class="switchmode pull-right">
                <span class="glyphicon glyphicon-th" data-cls="iconview"></span>
                <span class="glyphicon glyphicon-th-list" data-cls="listview"></span>
            </span>

        </div>
    </div>
</div>
<!--  第一种方式 -->
<div id="tableview" class="autotableWrap hidden">
    <table id="tblFile"></table>
</div>
<!--  后两种方式 -->
<div id="toggleview" class="iconview ">
    <ul>
        <li class="listviewhead">
            <div class="l-icon"><div class="file-icon file-icon-lg " data-type="ppt"></div></div>
            <span class="l-title">文件名</span>
            <span class="l-filesize">文件大小</span>
            <span class="l-scsj">上传时间</span>
        </li>
        @*<li id='${file.id}' title='${file.name}'>
                <div class="l-icon"><div class="file-icon file-icon-lg" data-type="ppt"></div></div>
                <span class="l-title">${file.name}</span>
                <span class="l-filesize">${file.filesize}</span>
                <span class="l-scsj">${file.filesize}</span>
            </li>*@
    </ul>
</div>

<div id="mm" class="easyui-menu" style="width:120px;">
    <div data-options="name:'praise'">点赞</div>
    <div data-options="name:'preview'">预览</div>
    <div data-options="name:'download'">下载</div>
</div>
@section scripts{

    <link href="~/Scripts/easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="~/Scripts/fileicon/fileicon.css" rel="stylesheet" />
    <script src="~/Scripts/easyui/jquery.easyui.min.js"></script>
    <script src="~/AppTS/ZLCX.js"></script>
}




